<!-- src/App.vue -->
<script setup>
import { onMounted, onUnmounted } from 'vue'
import { useMonitorStore } from './stores/monitorStore.js'
import JhHeader from './components/JhHeader.vue'
import MonitorTable from './components/MonitorTable.vue'
import { RouterLink, RouterView } from 'vue-router'

const monitorStore = useMonitorStore()
const { monitorData, loadAllMonitorData } = monitorStore

// 组件挂载时获取数据
onMounted(() => {
  loadAllMonitorData()

  // 定时刷新数据（每30秒）
  const refreshInterval = setInterval(loadAllMonitorData, 30000)

  // 组件卸载时清除定时器
  onUnmounted(() => {
    clearInterval(refreshInterval)
  })
})
</script>

<template>
  <!-- 导航栏 -->
  <nav class="nav">
    <RouterLink to="/">首页</RouterLink>
    <RouterLink to="/picture">拍照</RouterLink>
    <RouterLink to="/table/1">一号工况</RouterLink>
    <RouterLink to="/table/2">二号工况</RouterLink>
    <RouterLink to="/table/3">三号工况</RouterLink>
  </nav>

  <!-- 加载状态 -->
  <div v-if="monitorData.loading" class="status loading">
    <i class="fa fa-spinner fa-spin"></i> 数据加载中...
  </div>

  <!-- 错误状态 -->
  <div v-else-if="monitorData.error" class="status error">
    <i class="fa fa-exclamation-circle"></i> {{ monitorData.error }}
    <button @click="loadAllMonitorData" class="retry-btn">重试</button>
  </div>
  <JhHeader />
  <!-- <RouterView /> -->
  <RouterView :monitorData="monitorData" />

  <!-- 默认首页内容 -->
  <div v-if="$route.path === '/'">
    <MonitorTable :monitorData="monitorData" />
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family:
    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

#app {
  min-height: 100vh;
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  background-attachment: fixed;
  padding: 0;
}

/* 导航样式 */
.nav {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin: 20px 0;
}

.nav a {
  text-decoration: none;
  color: #333;
  padding: 10px 20px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 5px;
  transition: all 0.3s ease;
}

.nav a:hover {
  background-color: rgba(255, 255, 255, 1);
  transform: translateY(-2px);
}

.app-container {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
}

header {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 10px 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.main-content {
  flex: 1;
  padding: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.content-wrapper {
  width: 100%;
  max-width: 1200px;
}

/* 加载状态样式 */
.status {
  text-align: center;
  padding: 40px 20px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  margin: 20px;
  min-width: 300px;
}

.status.loading i {
  color: #4285f4;
  font-size: 2rem;
  margin-right: 10px;
  vertical-align: middle;
}

.status.error {
  border-left: 4px solid #ff4757;
}

.status.error i {
  color: #ff4757;
  font-size: 2rem;
  margin-right: 10px;
  vertical-align: middle;
}

.retry-btn {
  margin-top: 15px;
  padding: 8px 16px;
  background: #4285f4;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.3s ease;
}

.retry-btn:hover {
  background: #3367d6;
}
.nav a.router-link-active {
  background-color: rgb(33, 151, 43);
  transform: translateY(-2px);
}
</style>
